<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="登录密码" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		
		<view class="profile-edit-main">
		    <view class="profile-edit-content">
		        <view class="item">
		            <view class="title">
		                <view>请输入</view>
		                <view class="info" style="margin-top: 4rpx;">{{ mobile }}</view>
		                <view>收到的短信验证码</view>
		            </view>
		        </view>
		        
				
				<view class="form_item">
					<u-input type="text" placeholder="请输入验证码" v-model="captcha" :clearable='false'
						placeholder-style='color: #a5a5a5;' border="bottom">
						<template slot="suffix">
							<u-code
								ref="uCode"
								@change="codeChange"
								changeText="X秒重新获取"
							></u-code>
							<u-button
								@tap="get_code"
								:text="tips"
								type="primary"
								size="small"
								shape="circle"
							></u-button>
						</template>
					</u-input>
				</view>
				
				<view class="form_item">
					<u-input placeholder="请输入新密码" v-model="password1" :clearable='false' type="password"
						placeholder-style='color: #a5a5a5;' :password-icon="true" border="bottom"/>
				</view>
				
				<view class="form_item">
					<u-input placeholder="请再次输入新密码" v-model="password2" :clearable='false' type="password"
						placeholder-style='color: #a5a5a5;' :password-icon="true" border="bottom"/>
				</view>
				
				
				<view class="sub_but" @click="editPsw">提交</view>
		    </view>
		    <view class="profile-edit-content">
		        <view class="btn-item">
		            <view class="title">
		                <view class="big-title">为什么要进行身份验证？</view>
		            </view>
		            <view class="info">1. 为保障您的账户信息安全，在变更账户中的重要信息时需要进行身份验证，感谢您的理解和支持。</view>
		            <view class="info">2. 验证身份遇到问题？您可以通知我们的客服，我们将尽快联系您。</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.js'
	export default {
		data() {
			return {
				captcha:'',
				password1:'',
				password2:'',
				count: 60,
				tips: '',
			};
		},
		computed:{
			mobile(){
				// console.log(this.$store.state.userInfo)
				return this.$store.state.userInfo.mobile;
				
			},
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44;
			}
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			editPsw(){
				if (!this.captcha) return this.$u.toast("请输入验证码");
				if (!this.password1) return this.$u.toast("请输入新密码");
				if (!this.password2) return this.$u.toast("请输入新密码");
				if (!this.password1 == this.password2) return this.$u.toast("两次密码不一致");
			
				this.$request({
					url:'?c=Login&a=forgotPwd',
					type:'post',
					data:{
						account:this.$store.state.userInfo.mobile,
						password:md5.hex_md5(this.password1),
						password_repeat:md5.hex_md5(this.password2),
						sms_code:this.captcha
					}
				}).then(res =>{
					this.$u.toast("修改成功");
					setTimeout(() => {
						this.$nav(2)
					}, 1000)
				})
			},
			get_code(){
				// if (!this.name) return this.$u.toast("请输入账号");
				if(this.$refs.uCode.canGetCode){
					this.$request({
						url: '?c=Setting&a=smsCode',
						type: 'post',
						data: {
							type: 3,
							mobile: this.$store.state.userInfo.mobile,
						}
					}).then(res => {
						setTimeout(() => {
							uni.hideLoading();
							
							// uni.$u.toast('验证码已发送');
							this.$u.toast(res.data)
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 1000);
					
					})
				}else{
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.profile-edit-main {
    padding: 30rpx;

    .profile-edit-content {
        background-color: #fff;
        border-radius: 15rpx;
        padding: 20rpx;
        margin-bottom: 30rpx;
        display: flex;
        flex-direction: column;
        gap: 16rpx;

        .item {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            margin: 20rpx;
            height: 60rpx;

            .next {
                width: 100%;
                height: 100%;
            }

            .title {
                font-size: 24rpx;
                display: flex;
                gap: 16rpx;

                .info {
                    color: #999999;
                }
            }
        }

        .item-one {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
        }

        .btn-item {
            display: flex;
            flex-direction: column;
            margin: 20rpx;
            font-size: 24rpx;
            gap: 16rpx;

            .big-title {
                font-size: 28rpx;
            }

            .info {
                color: #999999;
            }
        }

        .input {
            padding-bottom: 10rpx;
            border-bottom: 1px solid #dfdfdf;
        }
    }
}
.form_item {
	// align-items: center;
	// display: flex;
	// justify-content: space-between;
	// padding: 35rpx;
	padding: 10rpx 15rpx;
	
	// border-bottom: 1rpx solid #ebebeb;
}
.sub_but {
		text-align: center;
		background-color: $u-primary;
		color: #fff;
		line-height: 80rpx;
		border-radius: 50rpx;
		margin-top: 50rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
	}
</style>
